<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery 属性操作</title>
    <!-- 引入jQuery -->
    <script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js">
    </script>
    <script>
        $(function () {
            $('#getAttr').click(function () {
                console.log($('#btn').attr('type'));//button
                console.log($('#btn').attr('id'));//btn
                console.log($('#btn').attr('value'));//点我
            });
            $('#setAttr').click(function () {
                $('#btn').attr('value','hello');
                $('#btn').attr('type','text');
            });
            $('#addClass').click(function () {
                $('#btn').addClass('other');
            });
            $('#removeClass').click(function () {
                $('#btn').removeClass('other');
            });
            $('#toggleClass').click(function () {
                $('#btn').toggleClass('myBtn');
            });
            $('#hasClass').click(function () {
                console.log($('#btn').hasClass('other'));
            });
            $('#hasClass').click(function () {
                console.log($('#btn').hasClass('myBtn'));
            });
        });
        $(function () {
            //css方法针对style属性
            console.log($('#gender').css('color'));
            //val方法针对value属性
            console.log($('#gender').val());
            //addClass,removeClass针对class属性
            console.log($('#gender').removeClass('other'));
            //prop方法针对selected,checked属性
            console.log($('#gender').prop('checked'));
            $('#gender').prop('checked', false);
            //data方法针对data-开头的属性
            console.log($('#gender').data('option'));
        })
    </script>
    <style type="text/css">
        .other {
            background-color: orange;
            font-size: 20px;
        }
        .myBtn{
               background-color: red;
           }
    </style>
</head>
<body>
<input id="btn" type="button" value="点我"/>
<form>
    <fieldset>
        <legend>属性操作</legend>
        <input type="button" value="获取属性值" id="getAttr"/>
        <input type="button" value="设置属性值" id="setAttr"/>
    </fieldset>
</form>
<form>
    <fieldset>
        <legend>CSS 操作</legend>
        <input type="button" value="添加CSS" id="addClass"/>
        <input type="button" value="删除CSS" id="removeClass"/>
        <input type="button" value="轮换CSS" id="toggleClass"/>
        <input type="button" value="判断CSS" id="hasClass"/>
    </fieldset>
</form>
<input type="checkbox" value="1" checked name="gender" id="gender" dataoption='{"name" : "蒋干"}'
       style="color: green; background: aqua" class="myBtn other" value="data-rencai"> 男
</body>
</html>
